﻿@using Microsoft.AspNetCore.Components
@namespace MudBlazor.Docs.Examples

<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Identifier == dropzone)" ItemDropped="ItemUpdated">
    <ChildContent>
        <MudPaper MinHeight="500px" Class="d-flex flex-1">
            <MudList T="string" Dense="true" @bind-SelectedValue="_selectedFolder">
                <MudListSubheader>MailBox</MudListSubheader>
                <MudDropZone T="DropItem" Identifier="Inbox" OnlyZone="true">
                    <MudListItem Text="Inbox" Value="@("Inbox")" Icon="@Icons.Material.Filled.Inbox"/>
                </MudDropZone>
                <MudDropZone T="DropItem" Identifier="Sent" OnlyZone="true">
                    <MudListItem Text="Sent" Value="@("Sent")" Icon="@Icons.Material.Filled.Send"/>
                </MudDropZone>
                <MudDropZone T="DropItem" Identifier="Drafts" OnlyZone="true">
                    <MudListItem Text="Drafts" Value="@("Drafts")" Icon="@Icons.Material.Filled.Drafts"/>
                </MudDropZone>
                <MudListItem Icon="@Icons.Material.Filled.Label" Text="Categories" Expanded="true">
                    <NestedList>
                        <MudDropZone T="DropItem" Identifier="Social" OnlyZone="true">
                            <MudListItem Dense="true" Text="Social" Value="@("Social")" Icon="@Icons.Material.Filled.Group" Class="pl-8"/>
                        </MudDropZone>
                        <MudDropZone T="DropItem" Identifier="Forums" OnlyZone="true">
                            <MudListItem Dense="true" Text="Forums" Value="@("Forums")" Icon="@Icons.Material.Filled.Forum" Class="pl-8"/>
                        </MudDropZone>
                    </NestedList>
                </MudListItem>
            </MudList>
            <MudDivider Vertical="true" FlexItem="true" />
            <MudList T="string" Dense="true" Class="d-flex flex-column flex-grow-1 py-0">
                <MudToolBar Gutters="false" Dense="true">
                    <MudCheckBox @bind-Value="ToolbarCheckBox"/>
                    <MudIconButton Icon="@Icons.Material.Filled.Refresh"/>
                    <MudIconButton Icon="@Icons.Material.Filled.MoreVert"/>
                    <MudSpacer/>
                    <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft"/>
                    <MudIconButton Icon="@Icons.Material.Filled.ChevronRight"/>
                </MudToolBar>
                <MudDivider/>
                <MudDropZone T="DropItem" Identifier="@_selectedFolder.ToString()" Class="flex-grow-1"/>
            </MudList>
        </MudPaper>
    </ChildContent>
    <ItemRenderer>
        <MudListItem T="string" Text="@context.Name" />
        <MudDivider/>
    </ItemRenderer>
</MudDropContainer>

@code {
    public bool ToolbarCheckBox { get; set; } = false;
    string _selectedFolder = "Inbox";
    
    private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
    {
        dropItem.Item.Identifier = dropItem.DropzoneIdentifier;
    }
    
    private List<DropItem> _items = new()
    {
        new DropItem(){ Name = "Your exchange rate and Klarna benefits here", Identifier = "Inbox" },
        new DropItem(){ Name = "IKEA - Betalningsbekräftelse för din order", Identifier = "Inbox" },
        new DropItem(){ Name = "Leverans beställd till dig​", Identifier = "Inbox" },
        new DropItem(){ Name = "You’ve Got Sales! Cotton Bureau On Demand Report for Thursday, February 24, 2022", Identifier = "Inbox" },
        new DropItem(){ Name = "Answer: Offer to buy mudblazor", Identifier = "Drafts" },
        new DropItem(){ Name = "Inloggningsvarning för Facebook Messenger for Android", Identifier = "Social" },
        new DropItem(){ Name = "Nya privata meddelanden på SweClockers", Identifier = "Forums" },
    };
    
    public class DropItem
    {
        public string Name { get; init; }
        public string Identifier { get; set; }
    }
}
